// 运营数据统计-页面样式
// 调整自适应后样式
// 方案：1080px=100vh 1px=100/1080v约为0.1vh  ===>1vh约为10px

.layout-header-statictics {
  float: right;

  .statictics-btn {
    margin-right: 4px;
    border: none;
    box-shadow: none;
  }
}

// 弹窗外层容器
.statictics-wrapper {
  $tit_hei: 4vh; // 区块标题-高度
  $tit_bg: #20272c; // 区块标题-背景色
  $boder_width: 1px;
  $boder_color: #6a6b6c;
  // $row1_hei: ;
  $row2_hei: 36vh; // 第二行-高度
  $row3_hei: 29vh; // 第三行-高度

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  max-width: 100%;
  width: 100% !important; // 全屏宽度
  height: 100% !important; // 全屏高度
  overflow: hidden;
  // height: max-content;
  // 弹窗页面样式
  .ant-modal-content {
    position: relative;
    width: 100%;
    min-height: 100%;
    // 页面背景色
    background-color: rgb(23, 30, 34);

    &:before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url("/webapp/statics_bg.jpg");
      // opacity: 0.1;
      // background-position: 50% center;
      background-size: 100% 100%;
      // 动画效果
      // alternate

      animation: myfirst 10s ease-in-out -2s infinite alternate;
    }
    @keyframes myfirst {
      0% {
        transform: scale(0.95);
        background-position: 70% 20%;
        opacity: 0.05;
      }
      25% {
        transform: scale(0.97);
        background-position: 60% 30%;
        opacity: 0.09;
      }
      50% {
        transform: scale(1);
        background-position: 50% 50%;
        opacity: 0.1;
      }
      75% {
        transform: scale(0.97);
        background-position: 40% 30%;
        opacity: 0.09;
      }
      100% {
        transform: scale(0.95);
        background-position: 30% 20%;
        opacity: 0.06;
      }
    }

    .ant-modal-body {
      padding: 2vh 25px 0;
      color: #fff;
    }
  }
  .close-btn {
    z-index: 1000;
    position: absolute;
    top: 2.5vh;
    right: 15px;
    color: #fff;
    background: #22292f;
    svg {
      width: 1.5em;
      height: 1.5em;
    }
  }
  .ant-spin-spinning {
    display: block;
    padding-top: 30px;
    text-align: center;
  }
  .page-title {
    margin-bottom: 3.8vh;
    padding: 0 40px;
    display: table;
    font-size: 38px;
    line-height: 4vh;
    color: #fff;

    .inner {
      position: relative;
      display: table-cell;
      white-space: nowrap;
      padding: 0 5vw;
      z-index: 10;
      background: #171e22;
      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 2px;
        display: block;
        width: 10px;
        height: 40px;
        border: $boder_width solid $boder_color;
      }
      &::before {
        left: 0;
      }
      &::after {
        right: 0;
      }
    }
    &::before,
    &::after {
      content: "";
      display: table-cell;
      width: 9999px;
      overflow: hidden;
      background: linear-gradient($boder_color 0, $boder_color) center no-repeat; /**这里用线性渐变生成的，也可以用其他方式**/
      background-size: 100% $boder_width;
    }
  }
  // todo：自适应高度；guntter用css来控制
  .row1,
  .row2 {
    margin: -1.8vh -16px 1.8vh !important;
    .ant-col {
      padding: 1.8vh 16px !important;
    }
  }

  .row3 {
    margin: -1vh -16px 1vh !important;
    .ant-col {
      padding: 1vh 16px !important;
    }
  }

  // 区块-公共样式
  .page-box {
    color: #fff;
    border: $boder_width solid $boder_color;
    .tit {
      // 标题
      margin: -2vh auto 0;
      width: 15vw;
      height: $tit_hei;
      line-height: $tit_hei;
      font-size: 18px;
      text-align: center;
      border: $boder_width solid $boder_color;
      background: $tit_bg;
    }
  }
  // 当前时间
  .now-time {
    position: absolute;
    top: 2vh;
    left: 24px;
    width: 280px;
    font-size: 20px;
    line-height: 4vh;
    background: #151b20;
    z-index: 3;
  }
  // 顶部box：今日实时数据
  .box-realtime {
    .ctn {
      font-size: 18px;
      .ant-row {
        margin: -0.4vh -4px 0 !important;
      }
      .column {
        padding: 1vh 0 !important;
      }
      span {
        padding-right: 10px;
        font-size: 42px;
        line-height: 6vh;
      }
    }
  }
  // 饼图区域
  .chart-pie-box {
    height: $row2_hei;

    .chart-area {
      position: relative;
      // margin: 0 50px;
      height: calc(100% - #{$tit_hei/2});
      color: #fff;
    }
    // 饼图自定义-legend
    .custom-legend {
      position: absolute;
      top: 2%;
      right: 3vw;
      height: 90%;
      display: flex;
      flex-direction: column;
      // align-items: left; /*水平*/
      justify-content: center; /*垂直*/
      li {
        // flex: 1;
        list-style: none;
        font-size: 12px;
        line-height: 42px;
        span {
          padding-right: 15px;
        }
        &:before {
          content: "";
          margin-right: 5px;
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
        }

        &.level0 {
          color: #f75d54;
          &:before {
            background: #f75d54;
          }
        }
        &.level1 {
          color: #0fb3f8;
          &:before {
            background: #0fb3f8;
          }
        }
        &.level2 {
          color: #26d981;
          &:before {
            background: #26d981;
          }
        }
        &.level3 {
          color: #fac334;
          &:before {
            background: #fac334;
          }
        }
        &.level4 {
          color: #2edadc;
          &:before {
            background: #2edadc;
          }
        }
        &.level5 {
          color: #7a57d1;
          &:before {
            background: #7a57d1;
          }
        }
        &.level6 {
          color: #ff8a5c;
          &:before {
            background: #ff8a5c;
          }
        }
      }
    }
  }

  // 地图区域
  .chart-map-box {
    height: $row2_hei;

    .chart-area {
      height: calc(100% - #{$tit_hei/2});
    }
    .area-map {
      position: relative;
      width: 100%;
      height: 100%;

      // 地图组件-样式
      .info_control {
        padding-left: 50px;
        .name {
          margin-bottom: 10px;
          span {
            font-size: 12px;
            color: #fff;
          }
        }
        .note {
          font-size: 10px;
          color: #97a8b3;
        }
      }
      .map_info_control {
        padding-right: 3vw;
        font-size: 12px;
        color: #fff;
        line-height: 2.6vh;
      }
    }
  }
  // 暂无数据-样式
  .chart-noData {
    padding-top: 20px;
    .ant-empty-image {
      height: 15vh;
    }
  }
  // 折线图-容器
  .chart-line-box {
    position: relative;
    height: $row3_hei;
    .tit {
      margin-bottom: $tit_hei/2;
      width: 15vw;
    }
    .chart-area {
      height: calc(100% - #{$tit_hei});
    }
    .switch-time {
      position: absolute;
      top: -$boder_width;
      right: -$boder_width;
      width: 8vw;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        flex: 1;
        padding-bottom: 3px;
        line-height: 3.2vh;
        text-align: center;
        background: $tit_bg;
        border: $boder_width solid $boder_color;
        cursor: pointer;
        &.on {
          padding-bottom: 0;
          border-bottom: 4px solid #ff0a1c;
        }
      }
    }
  }
}
